<template>
  <div class="todos">
    <div v-for="item in store.getters.filteredTodos" :key="item.id">
      <input type="checkbox" :checked="item.isFinished" @click="toggleTodo(item.id)" />
      <span :class="{ finished: item.isFinished }">{{ item.text }}</span>
      <button @click="removeTodo(item.id)">DELETE</button>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const toggleTodo = (id) => store.dispatch('toggleTodo', id);
const removeTodo = (id) => store.dispatch('removeTodo', id);
</script>

<style lang="scss" scoped>
.todos {
  span {
    min-width: 100px;
    line-height: 30px;
    padding: 0 10px;
    display: inline-block;
  }
}
.finished {
  text-decoration: line-through;
}
</style>
